<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标拖拽案例</title>
		<style>
			*{
				padding:0px;
				margin:0px;
			}
			.box{
				width:120px;
				height:120px;
				background:hotpink;
				position:absolute
			}
			p{
				background:#ccc;
			    width:1000px;
			}
		</style>
	</head>
	<body>
		<div class="box" id="tuo"></div>
		<p style="width:600px;">获取我的宽高</p>
		<script>
			var oDiv = document.getElementById("tuo");
			var p1= document.getElementsByTagName("p")[0];
         //需求:按着鼠标左键,移动鼠标时div跟着鼠标移动
         //给节点加鼠标按下事件
            oDiv.onmousedown = function(){
            	//给节点加鼠标移动事件
            	document.onmousemove = function(e){//document是为了优化鼠标跑太快，事件监听跟不上的bug
                //获取鼠标的位置
                  var oEv = e || event;//event指的是当前事件对象
                  oDiv.style.left = oEv.clientX-oDiv.offsetWidth/2 + "px";
                  oDiv.style.top  = oEv.clientY-oDiv.offsetHeight/2 + "px";
            	}
            }
            //鼠标按键松开时,用Null取代移动后面的函数,实现松开鼠标,div不再移动
            oDiv.onmouseup = function(){
            	oDiv.style.width = oDiv.offsetWidth/2 + "px";
            	oDiv.style.height = oDiv.offsetHeight/2 + "px";
            	document.onmousemove = null;
            }
           
            //获取节点的宽高的方法：节点.style.width的方法只能获取行内的样式值，样式表内获取不到
            //如要获取样式表内的宽高用节点.offsetWidth,节点.offsetHeight  他们获取的是这个节点最终的宽高，且没有单位
//           console.log(p1.style.width);
//           console.log(p1.offsetWidth);
		</script>
	</body>
</html>
